<template>
  <div>
    <keep-alive>
      <ReportArea></ReportArea>
    </keep-alive>

    <div class="index-main ovh">
      <ul class="index-left fl">
        <li>
          <a
            href="javascript:void(0)"
            @click="
              JumpToPage(SiteData.capital_declaration);
              return false;
            "
          >
            <i class="iconfont">&#xe619;</i>
            <p>资金申报</p>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="iconfont">&#xe618;</i>
            <p>宣传培训</p>
          </a>
        </li>
        <li>
          <router-link to="/download">
            <i class="iconfont">&#xe641;</i>
            <p>资料下载</p>
          </router-link>
        </li>
        <li>
          <router-link to="/construct">
            <i class="iconfont">&#xe61b;</i>
            <p>常见问题</p>
          </router-link>
        </li>
      </ul>
      <div class="index-right fr">
        <div class="news-tab">
          <a
            href="#"
            :class="{ on: activeTab == 1 }"
            @click="handlechangeTab('tzgg', 1)"
            >通知公告</a
          >
          <a
            href="#"
            :class="{ on: activeTab == 2 }"
            @click="handlechangeTab('gzdt', 2)"
            >工作动态</a
          >
          <a
            href="#"
            :class="{ on: activeTab == 3 }"
            @click="handlechangeTab('zcfg', 3)"
            >政策法规</a
          >
        </div>
        <div class="news-wrapper" style="display: block">
          <ul>
            <li v-for="(item, index) in tablist" :key="index">
              <a href="javascript:void(0);" @click="JumpToPage(item.link)">
                <p>{{ item.title }}</p>
                <span>{{ item.publish_date }}</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getters, getContentList } from "../../api/public";
import ReportArea from "./ReportArea.vue";
export default {
  name: "Index",
  data() {
    return {
      SiteData: {},
      activeTab: 1,
      tablist: [],
    };
  },
  mounted() {
    var that = this;
    getters().then((res) => {
      this.SiteData = res.data;
      that.$store.state.sitesetting.SiteData = res.data;
    });
    this.handlechangeTab("tzgg", 1);
  },
  methods: {
    JumpToPage(link) {
      this.$confirm("您将跳转到其它网站,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.open(link);
        })
        .catch(() => {});
      return false;
    },

    handlechangeTab(val, index) {
      this.activeTab = index;
      let parmse = {
        condition: {
          node_code: val,
          lang: "sc",
        },
        ipage: 1,
        page_size: 5,
      };
      getContentList(parmse).then((res) => {
        this.tablist = res.data.list;
      });
    },
  },
  components: {
    ReportArea,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
